<template>
  <div>
    
    <el-form :rules="rules" ref="ruleForm" :model="ruleForm" class="loginContainer">
        <h3 class="loginTitle">
          登录
        </h3>
        <el-form-item label="用户名" prop="username">
          <el-input type="username" v-model="ruleForm.username" autocomplete="off" ></el-input> 
        </el-form-item>

        <el-form-item label="密码" prop="password"  >
          <el-input type="password" v-model="ruleForm.password" autocomplete="off" :placeholder="密码"></el-input>
        </el-form-item>
    
        <div style="text-align:center">
          <el-button  
          type="info" 
          tyle="width:100%" 
          @click="submitForm('ruleForm')"
          style="width:100%; background: #505458;border: none"
          >登录</el-button>
        </div>

        <div style="text-align:center">
            <router-link to="/user/Register">
             注册新账号
            </router-link>
        </div> 
    
          
    </el-form>
  </div>
</template>

<script>

import {loginApi} from '../../api/login.ts' //注意路径

  export default {
    data() {
      var validatename = (_rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }else{
          callback();
        }
      };

      var validatepass = (_rule, value, callback) => {
        if (!value) {
         
          return callback(new Error('密码不能为空'));
          
        } else {

          callback();
        }
      };
      return {
        ruleForm: {
          username:'',
          password:''
        },
        rules: {
          username: [{validator: validatename,trigger:'blur'}],
          password: [{validator: validatepass,trigger:'blur'}]
        }
      };
    },
    created() {
      },
    methods: {
     submitForm() {
        this.$refs.ruleForm.validate((valid)=> {
        if(valid){
                 loginApi(this.ruleForm).then(res=>{  
                    // 用户登陆成功
                    if(String(res.code) ==='1'){
                        //用户信息存储到 vuex 和 localstorage
                        // this.setUser(res.data)
                        // localStorage.setItem('hp',JSON.stringify(res.data))
                        // this.$notify({
                        //     title: '登录成功',
                        //     type: 'success'
                        // });
                        // 用户登陆成功跳转到home页面
                        // this.$router.push('/')

                        alert("登录成功");
                         // 用户登陆成功跳转到home页面
                        this.$router.push('/item/index')
                    }else{
                        // this.$notify.error({
                        //     title: '登录失败',
                        //     message: '请重新登录'
                        // });
                        alert(res.msg);
                    }
                })
              // debugger;
              // let res = await loginApi(this.ruleForm)
              // if (String(res.code) === '1') {
              //   alert(res.msg);
              // } else {
              //   alert(res.msg);
              // }
               
               }
        }
        )},
      resetForm(formusername) {
        this.$refs[formusername].resetFields();
      }
    }
  }

</script>

<style lang="less" scoped>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: rgb(248, 248, 248);
        // border:1px solid blueviolet;
        // box-shadow: 0 0 25px #f885ff;
    }
    .loginTitle{
        margin: 0px auto 48px auto;
        text-align: center;
        font-size: 40px;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
    body{
        // background-image: url("../assets/background.png") ;
        background-size:100%;
    }
</style>

